/*
 * @Author: liszter <liszter@qq.com>
 * @Date: 2024-02-19 16:18:32
 * @LastEditTime: 2024-02-21 14:07:24
 * @LastEditors: lishutao
 * @Description: 暂无
 * @FilePath: \three学习代码\demo-10\src\main\main.js
 */
import * as THREE from "three";

import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";


// 导入动画库
import gsap from "gsap";

// 创建场景
const scene = new THREE.Scene();

// 创建相机
// 2、创建相机
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  300
);
camera.position.set(0, 0, 18);
scene.add(camera);




// 创建渲染器
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);


document.body.appendChild(renderer.domElement);





const sphereGroup = new THREE.Group();

// 中间的小球  （标准材质）
const sphereGeometry = new THREE.SphereBufferGeometry(1, 20, 20);
const spherematerial = new THREE.MeshStandardMaterial({
  side: THREE.DoubleSide,
});
const sphere = new THREE.Mesh(sphereGeometry, spherematerial);
// 投射阴影
sphere.castShadow = true;

sphereGroup.add(sphere);


// 创建一个白色的平面




// // // 创建平面
const planeGeometry = new THREE.PlaneGeometry(20, 20);
const plane = new THREE.Mesh(planeGeometry, spherematerial);
plane.position.set(0, -1, 0);
plane.rotation.x = -Math.PI / 2;
// 接收阴影
plane.receiveShadow = true;
sphereGroup.add(plane);



// // 灯光
// 环境光
// const light = new THREE.AmbientLight(0xffffff, 0.5); // soft white light
// sphereGroup.add(light);

const smallBall = new THREE.Mesh(
  new THREE.SphereBufferGeometry(0.1, 20, 20),
  new THREE.MeshBasicMaterial({ color: 0xff0000 })
);
smallBall.position.set(2, 2, 2);


// //直线光源
const pointLight = new THREE.PointLight(0xff0000, 2);
pointLight.position.set(2, 2, 2);
pointLight.castShadow = true;

// // 设置阴影贴图模糊度
pointLight.shadow.radius = 20;
// // 设置阴影贴图的分辨率
pointLight.shadow.mapSize.set(512, 512);

// // 设置透视相机的属性
smallBall.add(pointLight);
sphereGroup.add(smallBall);

sphereGroup.position.set(0, 0, 0);



scene.add(sphereGroup);


// 创建投射光线对象
const raycaster = new THREE.Raycaster();

const mouse = new THREE.Vector2();


// 监听鼠标的位置
window.addEventListener("mousemove", (event) => {
  mouse.x = event.clientX / window.innerWidth - 0.5;
  mouse.y = event.clientY / window.innerHeight - 0.5;
});


// 设置时钟
const clock = new THREE.Clock();


renderer.render(scene, camera);




gsap.to(smallBall.position, {
  x: -3,
  duration: 6,
  ease: "power2.inOut",
  repeat: -1,
  yoyo: true,
});
gsap.to(smallBall.position, {
  y: 0,
  duration: 0.5,
  ease: "power2.inOut",
  repeat: -1,
  yoyo: true,
});


// 渲染循环
function animate() {
  requestAnimationFrame(animate);


  let time = clock.getElapsedTime();
    smallBall.position.x = Math.sin(time) * 3;
    smallBall.position.z = Math.cos(time) * 3;
    smallBall.position.y = 2 + Math.sin(time * 10) / 2;



   //   根据当前滚动的scrolly，去设置相机移动的位置
   renderer.render(scene, camera);

}
animate();